<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>热风炉</title>
    <link rel="stylesheet" href="../css/normalize.css"/>
    <link rel="stylesheet" href="../css/element.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/hotwind.css"/>
</head>
<body class="theme">
<div id="header" v-cloak>
    <!-- 头部导航组件 -->
    <header-nav>
        <drop-menu slot="dropMenu" :menulist="headerMenuList"deftitle="4号高炉" sendname="gaoluNum" class="header-boiler outter-top fr" type="gaolu"></drop-menu>
    </header-nav>
</div>
<section class="main outter-top clearfix auto">
    <div class="left-side fl skin outter-right" id="left-side">
        <!-- 产用交互组件 -->
        <production-component></production-component>
        <!-- 主管压力放散组件 -->
        <pressure-component></pressure-component>
        <div class="gas" id="performance">
            <div class="gas-title outter-top  outter-bottom  clearfix">
                <h2 class="common-title fl">
                    本班绩效
                </h2>
            </div>
            <performance :performance-msg="performanceData" v-if="Object.keys(performanceData) != ''"></performance></div>
    </div>
    <div class="main-contain skin fl" id="hotwind_main" v-cloak>
        <ul class="main-container border clearfix">
            <li class="furnace bor-right fl" v-for="(item,key,index) in hotwindData" :class="item.className">
                <div class="main-item-data main-item-data-border" :class="changeImg(item)">
                    <div class="clearfix">
                        <p class="fl outter-top outter-left ">热风炉{{key}}</p>
                        <p class="fr furance-lable">{{item.name}}</p>
                    </div>
                    <div class="temperature">
                        <div v-if="item.scada_status==1">
                            <!--燃烧-->
                            <p>拱顶温度：<span>{{temperaturedata[key]&&temperaturedata[key].gd_temp | keepOne}}</span>℃</p>
                            <p>废气温度：<span>{{temperaturedata[key].fq_temp | keepOne}}</span>℃</p>
                            <p>当前废气升温速率：<span>{{temperaturedata[key].fq_temp_speed_actual | keepOne}}</span>°C/分</p>
                            <p class="">
                                当前用气量：<span>{{item.gas_use | keepTwo}}</span><span>X10<sup>4</sup>m<sup>3</sup>/h</span>
                            </p>
                            <p class="">
                                预计用气量：<span>{{item.gas_predict| keepTwo}}</span><span>X10<sup>4</sup>m<sup>3</sup>/h</span>
                            </p>
                        </div>
                        <div v-if="item.scada_status==2">
                            <!--冲压-->
                            <p>冷风压差：<span>{{temperaturedata[key].lf_pressure | keepOne}}</span>KPa</p>
                            <p>当前冲压速率：<span>{{temperaturedata[key].lf_pressure_speed_actual | keepOne}}</span>KPa/秒</p>
                            <p>建议冲压速率：<span>{{temperaturedata[key].lf_pressure_speed_suggest | keepOne}}</span>KPa/秒</p>
                        </div>
                        <div v-if="item.scada_status==3">
                            <!--送风-->
                            <p>送风温：<span>{{temperaturedata[key].songfengwen | keepOne}}</span>℃</p>
                            <p>送风压：<span>{{temperaturedata[key].songfengya | keepOne}}</span>KPa</p>
                            <div v-if="temperaturedata[key].fangfeiqi_status=='true'">
                                <p>放废气中</p>
                                <p>冷风压差：<span>{{temperaturedata[key].lf_pressure | keepOne}}</span>KPa</p>
                                <p>当前放废气速率：<span>{{temperaturedata[key].lf_pressure_speed_actual | keepOne}}</span>KPa/秒</p>
                                <p>建议放废气速率：<span>{{temperaturedata[key].lf_pressure_speed_suggest | keepOne}}</span>KPa/秒</p>
                            </div>
                        </div>
                    </div>

                    <div class="main-item-data-content outter-align clearfix">
                        <div v-if="item.status==1" class="green-color">
                            <p>计划时长：<span>{{item.plan_time|formatterTime}}</span></p>
                            <p>剩余时长：<span>{{item.cur_timeout | formatterTime}}</span></p>
                        </div>
                        <div v-if="item.status ==2" class="red-color">
                            <p>已延迟：<span>{{item.cur_timeout | formatterTime}}</span></p>
                            <p>请立即{{item.scada_status | hotwindStatus}}</p>
                        </div>
                        <div v-if="item.status ==3" class="red-color">
                            <p>严重延迟：<span>{{item.cur_timeout | formatterTime}}</span></p>
                            <p>请立即{{item.scada_status | hotwindStatus}}</p>
                        </div>
                        <div v-if="item.status ==4" class="orange-color">
                            <p><span>{{item.delay_cause}}</span>号高炉换炉延迟<span>{{item.total_wait | formatterTime}}</span></p>
                            <p>请等待</p>
                        </div>
                        <div v-if="item.status ==5" class="orange-color">
                            <p>工序切换</p>
                        </div>
                        <div v-if="item.status ==6" class="orange-color">
                            <p>请在 <span>{{item.cur_timeout | formatterTime}}</span>内{{item.scada_status | hotwindStatus}}</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="clearfix cursor" v-if="item.scada_status==1">
                        <p class="fl main-item-padd  border" :class="{'main-item-active':item.method==1}" @click="changeData(item,1,key)">
                            <span class="main-data-square main-data-square-sky"></span>煤气用量</p>
                        <p class="fl main-item-padd  border" :class="{'main-item-active':item.method==2}" @click="changeData(item,2,key)">
                            <span class="main-data-square  main-data-square-org"></span>废气温度</p>
                    </div>
                    <div class="clearfix outter-top" id="" v-else-if="item.scada_status==2"></div>
                    <div class="clearfix  cursor" v-else-if="item.scada_status==3">
                        <p class="fl main-item-padd  border" :class="{'main-item-active':item.method==3}"  @click="changeData(item,3,key)"><span class="main-data-square  main-data-square-org" ></span>混风比</p>
                        <p class="fl main-item-padd  border" :class="{'main-item-active':item.method==4}"  @click="changeData(item,4,key)"><span class="main-data-square  main-data-square-Wathet"></span>送风压</p>
                        <p class="fl main-item-padd  border" :class="{'main-item-active':item.method==5}"  @click="changeData(item,5,key)"><span class="main-data-square main-data-square-sky"></span>送风温</p>
                    </div>
                    <div class="main-data-status" :id="chartId[index]"></div>
                </div>
            </li>
        </ul> 
        <my-message :msg="myself"></my-message>
    </div>
    <div class="right-side outter-left fl" id="right-side" v-cloak>
        <div class="input-gas border">
            <h3 class="common-title outter-top outter-left">错峰协同台</h3>
            <div class="main-item-right-content outter-align clearfix">
                <p class="fl main-item-alldata-current">
                    当前用气总量
                    </br>
                    <span class="current-data">{{gas_total[1]|formatterVal|keepTwo}}</span> <span class="current-data-item-font">X10⁵m³/h</span >
                </p>
                <p class="fr main-item-alldata-current">
                    预计用气总量
                    </br>
                    <span class="current-data">{{allrealPoint[allrealPoint.length-1]|formatterVal|keepTwo}}</span>  <span class="current-data-item-font">X10⁵m³/h</span>
                </p>
            </div>
            <div class="border clearfix chose-box selectBox" >
                <p class="fl " @click="choseBok(false)" :class="{'active':choseBos}">节拍设定</p>
                <p class="fl" @click="choseBok(true)" :class="{'active':!choseBos}">部门用气</p>
            </div>
            <div v-show="choseBos">
                <div class="main-right-select clearfix">
                    <div class="fl pressure-all-data">
                        <div class="pressure-legend-all fl">
                            <div class="fl legend-des">
                                <span class="pressure-legend1-all-icon legend-all-icon fl"></span>
                                <span class="fl">实际总量</span>
                            </div>
                            <div class="fl pressure-legend2-de">
                                <span class="pressure-legend2-all-icon legend-all-icon fl"></span>
                                <span class="fl">预测总量</span>
                            </div>
                        </div>
                        <div class="pressure-legend-all fl">
                            <div class="fl ">
                                <span class="pressure-legend3-all-icon legend-all-icon fl"></span>
                                <span class="fl pad5">1</span>
                            </div>
                            <div class="fl pressure-legend2-de">
                                <span class="pressure-legend4-all-icon legend-all-icon fl"></span>
                                <span class="fl pad5">2</span>
                            </div>
                            <div class="fl pressure-legend2-de">
                                <span class="pressure-legend5-all-icon legend-all-icon fl"></span>
                                <span class="fl pad5">3</span>
                            </div>
                            <div class="fl pressure-legend2-de">
                                <span class="pressure-legend6-all-icon legend-all-icon fl"></span>
                                <span class="fl pad5">4</span>
                            </div>
                            <div class="fl pressure-legend2-de">
                                <span class="pressure-legend7-all-icon legend-all-icon fl"></span>
                                <span class="fl pad5">5</span>
                            </div>
                        </div>
                        <div class=""></div>
                    </div>
                </div>
                <div class="main-peak-chart border" id="hotwind_platform_chart"></div>
            </div>
            <div v-if="!choseBos"  class="chose-select border select-fontColor">
                <div id='example-3'>
                    错峰组合：
                    <input type="checkbox" id="3" value="3" v-model="checkedNames[0]">
                    <label for="3">3号高炉</label>
                    <input type="checkbox" id="4" value="4" v-model="checkedNames[1]">
                    <label for="4">4号高炉</label>
                    <input type="checkbox" id="5" value="5" v-model="checkedNames[2]">
                    <label for="5">5号高炉</label>
                </div>
                <div class="select-top">
                   换炉时间：
                    <select name="" id="" v-model="selected1">
                        <option value="0"> 0分钟</option>
                        <option value="10"> 10分钟</option>
                        <option value="20"> 20分钟</option>
                        <option value="30"> 30分钟</option>
                        <option value="40"> 40分钟</option>
                        <option value="50"> 50分钟</option>
                    </select>
                    <select name="" id="" v-model="selected2">
                        <option value="0"> 0分钟</option>
                        <option value="10"> 10分钟</option>
                        <option value="20"> 20分钟</option>
                        <option value="30"> 30分钟</option>
                        <option value="40"> 40分钟</option>
                        <option value="50"> 50分钟</option>
                    </select>
                    <select name="" id="" v-model="selected3">
                        <option value="0"> 0分钟</option>
                        <option value="10"> 10分钟</option>
                        <option value="20"> 20分钟</option>
                        <option value="30"> 30分钟</option>
                        <option value="40"> 40分钟</option>
                        <option value="50"> 50分钟</option>
                    </select>
                </div>
                <p @click="send" class="sure border">确定</p>
            </div>
            <div class="scroll-ball ">
                <ul class="scroll-box">
                    <li class="clearfix main-furnace" v-for="(item,index) in dataList">
                        <div class="main-furnace-mess" @click="showHide(index)">
                                <p class="fl main-data-furnace">
                                <!-- <span  :class="item.flag?'main-data-furnace-arrow':'main-data-furnace-arrow1'"></span> -->{{item.gaolu_id}}号高炉 <span class="main-data-furnace-user" v-if="gaolu==(index+3)"></span></p>
                            <div >
                                <div class="fl main-data-furnace-change">
                                    <p class="furnace-font">热风炉{{item.refenglu_id}}{{item.scada_status|refengluStatus}}</p>
                                    <div class="main-data-furnace-time clearfix">
                                        <p class="fl main-data-time-current"><span>{{changeMsg(item)}}</span></br><span class="current-time">{{item.cur_timeout | formatterTime}}</span></p>
                                        <div class="fl main-data-furnace-press"><p class="">当前进度(<span>{{item.cur_process_finished | keepTwo}}</span>%)</p><div class="main-data-current-press border" ><p class="main-data-current-val current-abnormal" :style="progressStyle(item,94)"></p></div></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
</body>
<script src="../js/lib/jquery-1.11.0.min.js"></script>
<script src="../js/lib/echarts.min.js"></script>
<script src="../js/lib/vue.min.js"></script>
<script src="../js/lib/elementUi.js"></script>
<script src="../js/lib/iview.min.js"></script>
<script src="../js/lib/vue-resource.js"></script>
<script src="../js/data.js"></script>
<script src="../js/base.js"></script>
<script src="../js/common.js"></script>
<script src="../js/chart.js"></script>
<script src="../js/components.js"></script>
<script src="../js/hotwindv.js"></script>
</html>